<template>
  <div class="main_page">
    <div class="homepage">
      <MainPage/>
    </div>
    <div>
      <ProjectInfo/>
    </div>

  </div>

</template>

<script setup lang="ts">
import MainPage from "~/ components/main/MainPage.vue";
import gsap from 'gsap';
import ProjectInfo from "~/ components/main/ProjectInfo.vue";

const GSAP = gsap

const HomePageAdmission = async () => {
  const homepage = document.querySelector('.homepage');
  GSAP.fromTo(homepage,
      { clipPath: 'inset(50% 0% at 40% 0%)', opacity: 0, delay: 0.8 },
      { clipPath: 'inset(0% 0% 0% 0%)', opacity: 1, duration: 0.5, delay: 0.5,  ease: "power3.inOut" }
  );
}

onMounted( () => {
   HomePageAdmission()
})


</script>

<style scoped>
.homepage {
  position: relative; /* 确保相对定位 */
  opacity: 0; /* 初始透明度设置为0 */
  clip-path: ellipse(0% 0% at 0% 50%); /* 初始状态为从左侧隐藏 */
  transition: opacity 0.3s ease; /* 可选：添加平滑过渡效果 */
}

</style>